<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>准了APP星座卡片</title>
    <meta name="description" content="#准了app#星盘卡片分享页">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: #1CEFEA;
    }

    #box {
        border-radius: 0.19rem;
        background-color: #FFFFFF;
        margin: 0.23rem;
        width: 7.04rem;
        box-shadow: 0 0.08rem 0.2rem 0 rgba(180, 180, 180, 0.2);
        overflow: hidden;
        position: relative;
    }

    .avatar {
        width: 1rem;
        height: 1rem;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        position: absolute;
        top: 0.52rem;
        left: 0.6rem;
    }

    .recode_des {
        height: 0.44rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3B3B3B;
        line-height: 0.44rem;
        position: absolute;
        top: 0.6rem;
        left: 1.88rem;
    }

    .user_des {
        width: 1.68rem;
        height: 0.34rem;
        font-size: 0.24rem;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #9B9DA9;
        line-height: 0.34rem;
    }

    .surface_des {
        position: absolute;
        top: 1.16rem;
        left: 1.88rem;
    }

    .actual_des {
        position: absolute;
        top: 1.16rem;
        left: 3.96rem;
    }

    .top {
        position: relative;
        height: 1.92rem;
    }

    .dividing_line {
        height: 0.12rem;
        background: linear-gradient(to right, #FFFFFF, #F3F9FF, #FFFFFF);
    }

    .score-title {
        margin-top: 0.32rem;
        margin-bottom: 0.32rem;
    }

    .score-title .attr-title {
        display: inline-block;
    }

    .score-title .ability-title {
        display: inline-block;
        margin-left: 1.5rem;
    }

    .score-info .attr-info {
        display: inline-block;
    }

    .attr-info .attr-score {
        margin-left: 0.4rem;
        margin-bottom: 0.3rem;
    }

    .attr-info .attr-name {
        margin-left: 0.1rem;
        width: 3rem;
        height: 0.34rem;
        font-size: 0.24rem;
        font-family: PingFangSC-Light, PingFang SC;
        color: #999999;
        line-height: 0.34rem;
        /*margin-bottom: 0.2rem;*/
    }

    .attr-name .name1 {
        float: left;
    }

    .attr-name .name2 {
        float: right;
    }


    .attr-info .attr-percent {
        margin-bottom: 0.2rem;
        width: 3.26rem;
    }

    .split-line {
        width: 0.02rem;
        height: 3.5rem;
        border-radius: 0.1rem;
        display: inline-block;
        margin-left: 0.2rem;
        background-color: #F0F9FE;
    }

    .ability-info {
        display: inline-block;
        margin-left: 0.2rem;
        vertical-align: top;
    }

    .ability-info .score {
        width: 1.88rem;
        height: 1.16rem;
        background: #FFFFFF;
        border-radius: 20px;
        margin-bottom: 0.25rem;
    }

    .ability-info .socre-title {
        font-size: 0.24rem;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #DE9595;
        line-height: 0.34rem;
        margin-top: 0.2rem;
        margin-left: 0.2rem;
    }

    .ability-info .score-num {
        height: 0.54rem;
        font-size: 0.4rem;
        font-family: DOUYU;
        color: #F16B6B;
        line-height: 0.95rem;
        text-align: center;
    }

    .icon {
        background-repeat: no-repeat;
        background-size: cover;
        width: 0.32rem;
        height: 0.32rem;
        display: inline-block;
        margin-left: 0.4rem;
        position: relative;
        top: 0.03rem;
    }

    .title {
        height: 0.44rem;
        font-size: 0.32rem;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #3B3B3B;
    }

    .percent {
        position: relative;
        width: 100%;
        height: 0.26rem;
        background-color: #F4F4F4;
        border-radius: 25px;
        overflow: hidden;
    }

    .percent-num {
        width: 0.28rem;
        height: 0.34rem;
        font-size: 0.24rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 0.3rem;
        margin: 0 auto;
    }

    .right-percent {
        height: 0.26rem;
        position: absolute;
    }

    .love-content {
        width: 100%;
        position: relative;
    }

    .spot-icon {
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 100%;
        display: inline-block;
        position: absolute;
        top: 0.35rem;
        left: 0.45rem;
    }

    .content {
        width: 5.5rem;
        font-size: 0.28rem;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #9B9DA9;
        line-height: 0.4rem;
        display: inline-block;
        margin: 0.2rem 0 0 0.7rem;
    }

    .skill-content {
        position: relative;
    }

    .skill-tips {
        /*width: 1.92rem;*/
        height: 0.56rem;
        background: #DCFFFE;
        border-radius: 0.32rem;
        color: #20A19F;
        display: inline-block;
        font-size: 0.26rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin-left: 0.5rem;
        margin-top: 0.35rem;
        /*padding: 0 0.2rem 0;*/
    }

    img {
        width: 0.3rem;
        height: 0.3rem;
    }

    .copy-info {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .copy-1 {
        width: 0.48rem;
        height: 0.35rem;
        background-image: url("https://oss.goddessxzns.com/web/static/astro_explain/images/copy-1.png");
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 0.04rem;
        right: 0.84rem;
    }

    .copy-2 {
        /*width: 0.73rem;*/
        /*height: 0.73rem;*/
        display: inline-block;
        float: right;
        background-image: url("https://oss.goddessxzns.com/web/static/astro_explain/images/copy-2.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        border-radius: 0.08rem 0 0.19rem 0;
        width: 0.83rem;
        height: 0.83rem;
    }
</style>
<body>
<div id="box">
    <div class="top">
        <div class="avatar" style="background-image: url('{$data.user_info.avatar}')"></div>
        <div class="recode_des">{$data.user_info.recode_des}</div>
        <div class="user_des surface_des">{$data.user_info.surface_des}</div>
        <div class="user_des actual_des">{$data.user_info.actual_des}</div>
    </div>
    <div class="dividing_line"></div>
    <div class="score-title">
        <div class="attr-title">
            <div class="icon"
                 style="background-image: url('{$host}web/static/astro_explain/images/attr-num.png')"></div>
            <span class="title">属性分值</span>
        </div>
        <div class="ability-title">
            <div class="icon"
                 style="background-image: url('{$host}web/static/astro_explain/images/ability-num.png')"></div>
            <span class="title">能力指数</span>
        </div>
    </div>
    <div class="score-info">
        <div class="attr-info">
            {foreach name="data.attr_score" item="vo" key="k"}
            <div class="attr-score">
                <div class="attr-name">
                    {if condition="$vo.id===0"}
                    {if condition="$vo.score<51"}
                    <div class="name1" style="color: #C98BFD;font-weight: bold">{$vo.low}</div>
                    <div class="name2">{$vo.high}</div>
                    {else}
                    <div class="name1">{$vo.low}</div>
                    <div class="name2" style="color: #C98BFD;font-weight: bold">{$vo.high}</div>
                    {/if}
                    {elseif condition="$vo.id===1"/}
                    {if condition="$vo.score<51"}
                    <div class="name1" style="color: #F6D01A;font-weight: bold">{$vo.low}</div>
                    <div class="name2">{$vo.high}</div>
                    {else}
                    <div class="name1">{$vo.low}</div>
                    <div class="name2" style="color: #F6D01A;font-weight: bold">{$vo.high}</div>
                    {/if}
                    {elseif condition="$vo.id===2"/}
                    {if condition="$vo.score<51"}
                    <div class="name1" style="color: #FCA2BF;font-weight: bold">{$vo.low}</div>
                    <div class="name2">{$vo.high}</div>
                    {else}
                    <div class="name1">{$vo.low}</div>
                    <div class="name2" style="color: #FCA2BF;font-weight: bold">{$vo.high}</div>
                    {/if}
                    {elseif condition="$vo.id===3"/}
                    {if condition="$vo.score<51"}
                    <div class="name1" style="color: #6DF6C6;font-weight: bold">{$vo.low}</div>
                    <div class="name2">{$vo.high}</div>
                    {else}
                    <div class="name1">{$vo.low}</div>
                    <div class="name2" style="color: #6DF6C6;font-weight: bold">{$vo.high}</div>
                    {/if}
                    {elseif condition="$vo.id===4"/}
                    {if condition="$vo.score<51"}
                    <div class="name1" style="color: #78C0F9;font-weight: bold">{$vo.low}</div>
                    <div class="name2">{$vo.high}</div>
                    {else}
                    <div class="name1">{$vo.low}</div>
                    <div class="name2" style="color: #78C0F9;font-weight: bold">{$vo.high}</div>
                    {/if}
                    {/if}
                    <div></div>
                </div>
                <div class="attr-percent">
                    {if condition="$vo.id===0"}
                    <div class="percent">
                        {if condition="$vo.score<51"}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient( #E6BFFF,#C98BFD);z-index: 9;-webkit-clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);left: 0">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {else}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient( #E6BFFF,#C98BFD);z-index: 9;-webkit-clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);right: 0;">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {/if}
                    </div>
                    {elseif condition="$vo.id===1"/}
                    <div class="percent">
                        {if condition="$vo.score<51"}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient( #FCF1A0,#F8DF67);z-index: 9;-webkit-clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);left: 0">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {else}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient(  #FCF1A0,#F8DF67);z-index: 9;-webkit-clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);right: 0;">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {/if}
                    </div>
                    {elseif condition="$vo.id===2"/}
                    <div class="percent">
                        {if condition="$vo.score<51"}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient(  #FFBCD2,#F996B6);z-index: 9;-webkit-clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);left: 0">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {else}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient(   #FFBCD2,#F996B6);z-index: 9;-webkit-clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);right: 0;">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {/if}
                    </div>
                    {elseif condition="$vo.id===3"/}
                    <div class="percent">
                        {if condition="$vo.score<51"}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient(  #97FFDB,#50E4B0);z-index: 9;-webkit-clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);left: 0">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {else}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient(#97FFDB,#50E4B0);z-index: 9;-webkit-clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);right: 0;">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {/if}
                    </div>
                    {elseif condition="$vo.id===4"/}
                    <div class="percent">
                        {if condition="$vo.score<51"}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient(#B0E1FD,#78C0F9);z-index: 9;-webkit-clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);left: 0">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {else}
                        <div class="right-percent"
                             style="width: {$vo.score/100*3.26+0.1}rem; background: linear-gradient(#B0E1FD,#78C0F9);z-index: 9;-webkit-clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);right: 0;">
                            <div class="percent-num">{$vo.score}</div>
                        </div>
                        {/if}
                    </div>
                    {/if}
                </div>
            </div>
            {/foreach}
        </div>
        <div class="split-line"></div>
        <div class="ability-info">
            {foreach name="data.ability_score" item="vo" key="k"}
            {if condition="$k===0"}
            <div class="score" style="border: 0.05rem solid #FFF5F5;">
                <div class="socre-title" style="color: #DE9595">{$vo.name}</div>
                <div class="score-num" style="font-size: 0">
                    <img src="{$vo.score1}" alt="">
                    {if condition="$vo.score2"}
                    <img src="{$vo.score2}" alt="">
                    {/if}
                    {if condition="$vo.score3"}
                    <img src="{$vo.score3}" alt="">
                    {/if}
                </div>
            </div>
            {elseif condition="$k===1"/}
            <div class="score" style="border: 0.05rem solid #FFF7ED;">
                <div class="socre-title" style="color:#EAC086 ">{$vo.name}</div>
                <div class="score-num" style="font-size: 0">
                    <img src="{$vo.score1}" alt="">
                    {if condition="$vo.score2"}
                    <img src="{$vo.score2}" alt="">
                    {/if}
                    {if condition="$vo.score3"}
                    <img src="{$vo.score3}" alt="">
                    {/if}
                </div>
            </div>
            {elseif condition="$k===2"/}
            <div class="score" style="border: 0.05rem solid #E6F6FF;">
                <div class="socre-title" style="color:#81BAD8 ">{$vo.name}</div>
                <div class="score-num" style="font-size: 0">
                    <img src="{$vo.score1}" alt="">
                    {if condition="$vo.score2"}
                    <img src="{$vo.score2}" alt="">
                    {/if}
                    {if condition="$vo.score3"}
                    <img src="{$vo.score3}" alt="">
                    {/if}
                </div>
            </div>
            {/if}
            {/foreach}
        </div>
    </div>
    <div class="love-concept" style="position: relative;top: 0.2rem">
        <div class="love-title">
            <div class="icon"
                 style="background-image: url('{$host}web/static/astro_explain/images/love-img.png')"></div>
            <span class="title">恋爱观念</span>
        </div>
        <div class="love-content">
            <div class="spot-icon" style="background-color: #FF6DA4"></div>
            <div class="content">{$data.Love_concept}</div>
        </div>
    </div>
    <div class="skill-info" style="position: relative;top: 0.8rem">
        <div class="skill-title">
            <div class="icon"
                 style="background-image: url('{$host}web/static/astro_explain/images/skill-img.png')"></div>
            <div style="display:inline-block;background-image: url('{$host}web/static/astro_explain/images/skill-img2.png'); background-repeat: no-repeat; background-size: cover;width: 1.24rem;height: 0.3rem;"></div>
        </div>
        <div class="skill-content">
            <div class="spot-icon" style="background-color: #1CEFEA"></div>
            <div class="content">{$data.unique_skills.title}</div>
        </div>
        {foreach name="data.unique_skills.list" item="vo" key="k"}
        <div class="skill-tips">
            <span class="icon"
                  style="background-image: url('{$host}web/static/astro_explain/images/skill-tip-icon.png');margin-left: 0.2rem;position: relative;top: 0.05rem"></span>
            <span class="tips" style="line-height: 0.6rem;margin-right: 0.25rem">{$vo}</span>
        </div>
        {/foreach}
        <div class="shadow-box" style="
        width: 1rem;
        height: 1rem;
        position: absolute;
        bottom: 1rem;
        right: -1.5rem;
        box-shadow: -50px 60px 60px 10px #679eff;"></div>
    </div>
    <div class="foot" style="margin: 0.3rem 0 0.5rem 0;visibility: hidden">.</div>
    <div class="copy-info">
        <div class="copy-1"></div>
        <div class="copy-2"></div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/rem-suit.js"></script>
<script src="/static/astro_explain_new/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $bodyHeight = $(window).height() * 0.946932;
        $("#box").css('height', $bodyHeight)
        $height = $("#box").outerHeight(true) / $(window).height();
        console.log($height)
        if ($height > 0.995) {
            $("#box").css('height', 'auto')
            $(".attr-info .attr-percent").css("marginBottom", "0.01rem")
            $(".ability-info .score").css("marginBottom", "0.3rem")
            $(".ability-info .score-num").css("lineHeight", "0.8rem")
            // $(".split-line").css("height", "4rem")
            $(".split-line").css("marginBottom", "0.3rem")
            $(".content").css("marginTop", "0.1rem")
            $(".top").css("height", "1.7rem")
        }
        if ($height > 1) {
            $(".shadow-box").css('right', '-1rem')
            $(".shadow-box").css('box-shadow', 'rgb(103 158 255) -50px 60px 110px 20px')
        }
    })
</script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
